<template>
  <a-card :bordered="false" title="服务记录">
    <a-button :style="{ marginBottom: '1rem' }" type="danger" @click="addServiceRecord"> 添加 </a-button>
    <a-table bordered :columns="columns" :data-source="data" :pagination="false" :loading="loading" rowKey="packageId">
      <a slot="action" slot-scope="text, record">
        <a-button style="margin-right:10px" v-if="record.status != 2" @click="viewServiceDetail(record)"
          >查看服务详情</a-button
        >
        <a-button v-if="record.status == 1" @click="handleQuit(record)">退出服务</a-button>
      </a>
      <template slot="statusText" slot-scope="text, record">
        <a-badge :status="record.status | statusColor" :text="record.statusText" />
      </template>
    </a-table>
    <quit-modal ref="quitModal" @ok="handleOk1"></quit-modal>
    <service-detail-modal ref="serviceDetailModal"></service-detail-modal>
    <add-service-record-modal
      ref="addServiceRecordModal"
      :reverseServiceList="reverseServiceList"
      :signinTemplateList="signinTemplateList"
      @refresh="getServiceData"
    ></add-service-record-modal>
  </a-card>
</template>

<script>
import { PAGE_MENU_TYPE } from '@/store/mutation-types'
import { getAction, postAction } from '@/api/manage'
import { mapGetters } from 'vuex'
import ServiceDetailModal from './modules/ServiceDetailModal.vue'
import AddServiceRecordModal from './modules/AddServiceRecordModal.vue'
import QuitModal from './modules/QuitModal.vue'

const columns = [
  {
    title: '服务名称',
    dataIndex: 'packageName',
    width: 130
  },
  {
    title: '状态',
    dataIndex: 'statusText',
    scopedSlots: { customRender: 'statusText' },
    width: 100
  },
  {
    title: '打卡计划名称',
    dataIndex: 'planName'
  },
  {
    title: '有效期',
    dataIndex: 'validPeriod'
  },
  {
    title: '操作',
    dataIndex: 'operation',
    width: 300,
    scopedSlots: { customRender: 'action' },
    fixed: 'right'
  }
]

export default {
  name: 'RecordList',
  components: {
    ServiceDetailModal,
    AddServiceRecordModal,
    QuitModal
  },
  data() {
    return {
      columns,
      data: [],
      url: {
        getService: '/107/03/1070314',
        getReverseServiceList: '/107/03/1070309',
        getSigninTemplateList: '/signin/template/list'
      },
      quitParams: {},
      orgCode: '',
      loading: true,
      reverseServiceList: [],
      signinTemplateList: []
    }
  },
  filters: {
    statusColor(item) {
      switch (item) {
        case 1: //服务中
          return 'processing'
          break
        case 2: //未开始
          return 'default'
          break
        case 3: //已结束
          return 'success'
          break
        case 4: //已退出
          return 'error'
          break
        case 5: //已到期
          return 'warning'
          break
        default:
          return 'default'
          break
      }
    }
  },
  created() {
    this.orgCode = JSON.parse(localStorage.pro__Login_Userinfo).value.orgCode
    this.getServiceData()
    this.getReverseServiceList()
    this.getSigninTemplateList()
  },
  methods: {
    getServiceData() {
      postAction(this.url.getService, {
        patientId: this.$route.query[PAGE_MENU_TYPE.PatientId]
      })
        .then(res => {
          if (res.success) {
            this.data = res.result.records
          }
        })
        .finally(_ => {
          this.loading = false
        })
    },
    getReverseServiceList() {
      getAction(this.url.getReverseServiceList, {
        patientId: this.$route.query[PAGE_MENU_TYPE.PatientId],
        orgCode: this.orgCode
      }).then(res => {
        if (res.success) {
          this.reverseServiceList = res.result
        }
      })
    },
    getSigninTemplateList() {
      postAction(this.url.getSigninTemplateList, { orgCode: this.orgCode }).then(res => {
        if (res.success) {
          this.signinTemplateList = res.result
        }
      })
    },
    viewServiceDetail(record) {
      this.$refs.serviceDetailModal.view(record)
    },
    addServiceRecord() {
      this.$refs.addServiceRecordModal.add()
    },
    handleOk1() {
      this.getServiceData()
    },
    handleCancel1() {
      this.endVisible = false
    },
    handleCancel() {
      this.endVisible = false
    },
    handleQuit(record) {
      postAction('107/03/1070315', {
        packageId: record.packageId,
        patientId: this.$route.query[PAGE_MENU_TYPE.PatientId]
      }).then(res => {
        if (res.success) {
          this.params = res.result.basicInfo
          this.params.servicePackageId = record.packageId
          this.$refs.quitModal.edit(this.params)
        }
      })
    }
  }
}
</script>

<style lang="less" scoped></style>

